<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>栅格布局</title>
		<style type="text/css">
		.grid-container{
			display: grid;
			background-color: lightgreen;
			padding: 10px;
			height: 700px;
			grid-template-columns: 1fr 2fr 3fr 1fr;
			grid-template-rows: 150px 250px 300px;
		}
		.grid-container > div{
			background-color: aquamarine;
			text-align: center;
			padding: 15px;
			border: 5px solid white;
		}
		
		</style>
	</head>
	<body>
		<div class="grid-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
		</div>
	</body>
</html>
